<template>
  <div class="container">
    <div class="left">
      <div class="toptitle">
        <div class="titletext">设备操作总览</div>
        <hr />
      </div>
      <div id="calendar" />
    </div>
    <div class="right">
      <div class="toptitle">
        <div class="titletext">设备操作统计</div>
        <hr />
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { Calendar } from "@fullcalendar/core"; // 导入 FullCalendar
import dayGridPlugin from "@fullcalendar/daygrid"; // 月视图插件
import timeGridPlugin from "@fullcalendar/timegrid"; // 日视图插件
import interactionPlugin from "@fullcalendar/interaction"; // 交互插件（拖拽等）

// 引入中文语言包
import zhCn from "@fullcalendar/core/locales/zh-cn"; 

onMounted(() => {
  const calendarEl = document.getElementById("calendar"); // 获取日历容器
  if (calendarEl) {
    const calendar = new Calendar(calendarEl, {
      height: "auto",
      plugins: [dayGridPlugin, interactionPlugin, timeGridPlugin],
      initialView: "dayGridMonth", // 初始视图设置为月视图
      locale: "zh-cn", // 设置语言为中文
      headerToolbar: {
        left: "dayGridMonth,timeGridWeek,timeGridDay",
        center: "title",
        right: "prevYear,prev,next,nextYear today",
      },
      dayMaxEventRows: 3,
      events: [], // 你可以在这里加载事件
      eventClick: function (info) {
        const serverData = info.event.extendedProps.ServerByGameIdData;
        console.log("Clicked event:", serverData);
      },
      eventDrop: function (info) {
        console.log("Event dropped:", info);
      },
      dateClick: function (info) {
        calendar.changeView("timeGridDay", info.dateStr); // 切换到日视图
      },
      eventTimeFormat: { // 事件时间格式
        hour: "2-digit",
        minute: "2-digit",
        hour12: false,
      },
      editable: true, // 是否可以编辑
    });

    calendar.render(); // 渲染日历
  }
});
</script>

<style lang="scss" scoped>
@use "@/styles/themes.scss";

.container {
  flex: 1;
  border-radius: 10px;
  box-sizing: border-box;
  display: flex;
  padding: 10px;  // 添加容器的内边距
  
  .left {
    width: 50%;
    border-radius: 6px;
    margin-right: 10px;
    box-shadow: 0 0 5px 1px #cecece;
    padding: 20px;  // 增加左右侧的内边距
    background-color: #fff; // 背景色可以根据需求自定义
  }

  .right {
    display: flex;
    flex: 1;
    border-radius: 6px;
    box-shadow: 0 0 5px 1px #cecece;
    padding: 20px;  // 增加右侧的内边距
    background-color: #f9f9f9;  // 背景色
  }
}

.toptitle {
    margin: 10px;

    .titletext {
        border-left: 3px solid var(--primary-color);
        padding-left: 10px;
        font-size: 18px;
        font-weight: bold;
    }

    hr {
        background-color: rgb(194, 194, 194);
        height: 1px;
        border: none;
        margin: 5px 0;
    }
}


// 日历容器样式
#calendar {
  width: 100%;
  max-width: 100%;
  background-color: #ffffff;  // 可以设置日历背景色
  border-radius: 10px;
  padding: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); // 为日历加个阴影
}

// 标题栏样式
.fc-header-toolbar {
  background-color: var(--primary-color); // 设置标题栏背景色
  padding: 10px;
  border-radius: 6px;
}

.fc-button {
  background-color: #4caf50;  // 按钮背景色
  color: white;  // 按钮文字颜色
  border: none;
  border-radius: 6px;
  padding: 5px 10px;
  margin: 0 5px;
}

.fc-button:hover {
  background-color: #45a049;  // 悬停时的按钮颜色
}

.fc-button-primary {
  background-color: #3b82f6;  // 'Today' 按钮的背景色
  color: white;
}

.fc-button-primary:hover {
  background-color: #2563eb;  // 悬停时的颜色
}

// 日期格子的样式
.fc-daygrid-day {
  background-color: #ffffff;  // 设置每个日期格子的背景色
  border: 1px solid #ddd;  // 给每个日期格子加个边框
  padding: 5px;
  border-radius: 6px;
}

.fc-daygrid-day:hover {
  background-color: #e3f2fd;  // 鼠标悬停时的背景色
}

// 事件样式
.fc-event {
  background-color: #ffeb3b;  // 事件的背景色
  color: #000;  // 事件文字颜色
  border-radius: 6px;
  padding: 5px;
}

.fc-event:hover {
  background-color: #fdd835;  // 悬停时的事件背景色
}

// 设置选中的日期样式
.fc-daygrid-day-selected {
  background-color: #d3f4ff;  // 选中日期的背景色
  border: 1px solid #64b5f6;  // 选中日期的边框
}

// 设置周视图和日视图中的格子样式
.fc-timegrid-slot {
  background-color: #f5f5f5;
}

.fc-timegrid-slot:hover {
  background-color: #e3f2fd;
}
</style>
